<template>
  <div>
    <div class="order-item">
      <div @click="orderInfo">
        <div class="order-item-title">
          <div class="order-item-title-left paragraph-p2-heavy">
            <span>订单号：</span>
            <span>{{ item.id }}</span>
          </div>
          <div class="order-item-title-right div-align-justify-center paragraph-p2-heavy">
            <svg v-if="item.order_status !== '已完成'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M14.6666 8.00016C14.6666 11.6802 11.6799 14.6668 7.99992 14.6668C4.31992 14.6668 1.33325 11.6802 1.33325 8.00016C1.33325 4.32016 4.31992 1.3335 7.99992 1.3335C11.6799 1.3335 14.6666 4.32016 14.6666 8.00016Z" stroke="#F2360D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M10.4734 10.1202L8.40675 8.88684C8.04675 8.6735 7.75342 8.16017 7.75342 7.74017V5.00684" stroke="#F2360D" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <svg v-if="item.order_status === '已完成'" width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path d="M8.00016 14.6668C11.6668 14.6668 14.6668 11.6668 14.6668 8.00016C14.6668 4.3335 11.6668 1.3335 8.00016 1.3335C4.3335 1.3335 1.3335 4.3335 1.3335 8.00016C1.3335 11.6668 4.3335 14.6668 8.00016 14.6668Z" stroke="#2EB896" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
              <path d="M5.1665 7.99995L7.05317 9.88661L10.8332 6.11328" stroke="#2EB896" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/>
            </svg>
            <span class="padding-left-4">{{ item.order_status }}</span>
          </div>
        </div>
        <div class="order-item-row-left paragraph-p3-light">
          <span>销售员：</span>
          <span>{{ item.user.name }}</span>
        </div>
        <div class="order-item-row-left paragraph-p3-light">
          <span>出单时间：</span>
          <span>{{ item.created_at }}</span>
        </div>
        <div class="order-item-product-item">
          <div class="order-item-product">
            <img :src="item.product.product_image_list ? item.product.product_image_list[0] : ''" alt=""/>
            <div class="order-item-product-content">
              <div class="order-item-product-content-desc paragraph-p2-light text-desc">
                {{ item.product.product_description }}
              </div>
              <div class="order-item-product-content-category paragraph-p3-light">
                {{ item.product.product_category ? item.product.product_category : ''  + '；'
                  + item.product.size ? item.product.size : '' + '；'
                  + item.product.accessories ? item.product.accessories : '' }}
              </div>
            </div>
          </div>
          <div class="order-item-row-right paragraph-p2-light">
            {{ '总计$' + item.product.product_sale_price }}
          </div>
          <div class="order-item-row-right paragraph-p3-light text-desc">
            {{ item.payment_note }}
          </div>
        </div>
      </div>
      <div class="order-item-act paragraph-p2-heavy">
        <div class="order-item-act-button"
             :class="orderSetting.confirmDialogTitle ? ifShowConfirmButton ? 'background-color-yellow' : 'background-color-grey' : 'order-item-act-button-cancel-yellow' "
             @click="orderConfirm"
        >{{orderSetting.confirmButton}}</div>
        <div v-if="orderSetting.ifShowCancel" class="order-item-act-button"
             :class="ifShowConfirmButton ? 'order-item-act-button-cancel-yellow': 'order-item-act-button-cancel-grey'"
             @click="orderCancel">取消订单</div>
      </div>
    </div>
  </div>
</template>

<script>
import {Dialog, Toast} from "vant";
import {changeOrderStatus, deleteOrder} from "@/request/api";

const orderSettingList = [
  {statusTag: '有余款', confirmButton: '确认已收全款', confirmDialogTitle: '确认已收全款？', ifShowCancel: true},
  {statusTag: '待核款', confirmButton: '确认核款', confirmDialogTitle: '确认核款？', ifShowCancel: true},
  {statusTag: '待发货', confirmButton: '确认发货', confirmDialogTitle: '确认发货？', ifShowCancel: true},
  {statusTag: '待自提', confirmButton: '确认自提', confirmDialogTitle: '确认自提？', ifShowCancel: true},
  {statusTag: '已发货', confirmButton: '已发单号', confirmDialogTitle: '已发单号？', ifShowCancel: false},
  {statusTag: '寄卖待结', confirmButton: '确认与卖家结款', confirmDialogTitle: '确认与卖家结款？', ifShowCancel: false},
  {statusTag: '已完成', confirmButton: '订单详情', confirmDialogTitle: '', ifShowCancel: false},
]
export default {
  name: "OrderItem",
  props: {
    item: {
      type: Object,
      default: () => ({
        id: Number,
        order_status: {type: String, default: () => ('')},
        payment_note: {type: String, default: () => ('')},
        user_id: {type: String, default: () => ('')},
        user: {
          type: Object,
          default: () => ({
            name: {type: String, default: () => ('')},
          })},
        created_at: {type: String, default: () => ('')},
        updated_at: {type: String, default: () => ('')},
        delivery_method: {type: String, default: () => ('')},
        product: {
          type: Object,
          default: () => ({
            product_image_list: {type: Array, default: () => ([''])},
            product_description: {type: String, default: () => ('')},
            product_category: {type: String, default: () => ('')},
            product_sale_price: {type: Number, default: () => (0)},
            size: {type: String, default: () => ('')},
            accessories: {type: String, default: () => ('')},
          })
        },
      })
    },
    listItemCode: {type: Number, default: () => (this.GLOBAL.listItemType.order.payment)},
  },
  components: {},
  data() {
    return {
      isAdmin: this.$baseJS.getLoginUser().isAdmin,
      orderSetting: orderSettingList[this.listItemCode],
      ifShowConfirmButton: true,
    }
  },
  mounted() {
    if (!this.isAdmin) {
      this.ifShowConfirmButton = this.listItemCode !== this.GLOBAL.listItemType.order.verification
    }
  },
  methods: {
    orderInfo() {
      this.$router.push({path: '/order/'+ this.listItemCode +'/info/' + this.item.id + '?tab=' + this.listItemCode })
    },
    orderConfirm: function () {
      const orderListItemType = this.GLOBAL.listItemType.order
      if (this.listItemCode === orderListItemType.shipment && !this.isAdmin
            || this.listItemCode === orderListItemType.verification && !this.isAdmin) {
        console.log()
      } else if (this.listItemCode === orderListItemType.completed) {
        this.$router.push(this.GLOBAL.pathSetting.order.completed + this.item.id + '?tab=' + this.listItemCode)
      } else {
        this.orderConfirmAct(orderListItemType)
      }

    },
    orderConfirmAct(orderListItemType) {
      Dialog.confirm({
        title: this.orderSetting.confirmDialogTitle,
        className: 'paragraph-p1-light',
        cancelButtonColor: '#737373',
        confirmButtonColor: '#008061',
      }).then(() => {
        const ifSelfCategory = this.item.product.product_category === '自购'
        const ifSelfDelivery = this.item.delivery_method === '自提'
        let orderStatus = this.listItemCode === orderListItemType.payment ? '待核款' :
            this.listItemCode === orderListItemType.verification ? ifSelfDelivery ? '待自提' : '待发货' :
                this.listItemCode === orderListItemType.shipment ? '已发货' :
                    this.listItemCode === orderListItemType.pickup ? ifSelfCategory ? '已完成' : '寄卖待结' :
                        this.listItemCode === orderListItemType.shipped ? ifSelfCategory ? '已完成' : '寄卖待结' :
                            this.listItemCode === orderListItemType.settlement ? '已完成' :
                                this.listItemCode === orderListItemType.completed ? '' : ''
        if (orderStatus) {
          this.$loading.show()
          changeOrderStatus({pathParam: this.item.id, order_status: orderStatus}).then(res => {
            const {State, Msg} = res
            if (State) {
              this.$emit("orderNumRefreshEvent")
              this.$router.push(this.GLOBAL.pathSetting.order.main + '?tab=' + this.listItemCode)
            } else { Toast(Msg) }
            this.$loading.close()
          }).catch( ()=>{ this.$loading.close() } )
        } else {
          this.orderInfo()
        }
      }).catch(() => {});
    },
    orderCancel() {
      Dialog.confirm({
        title: '取消订单',
        message: '是否确定取消此订单？',
        className: 'paragraph-p1-light',
        confirmButtonText: '确定取消订单',
        confirmButtonColor: '#C62400',
        cancelButtonText: '取消',
        cancelButtonColor: '#737373',
      }).then(() => {
        // on confirm
        let param = { pathParam: this.item.id }
        this.$loading.show()
        deleteOrder(param).then(res => {
          const { State, Msg } = res
          if (State) {
            this.$emit("orderNumRefreshEvent")
            this.$router.push(this.GLOBAL.pathSetting.order.main + '?tab=' + this.listItemCode)
          } else { Toast(Msg) }
          this.$loading.close()
        }).catch( ()=>{ this.$loading.close() } )
      }).catch(() => {
        // on cancel
      });
    },
  },
}
</script>

<style scoped>
.order-item {
  height: 300px;
  background: #FFFFFF;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.06);
  border-radius: 8px;
  padding: 16px 12px;
  margin: 16px 0;
}

.order-item-title {
  height: 22px;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.order-item-title-left {
  width: 70%;
  height: 22px;
}

.order-item-title-right {
  width: 30%;
  height: 22px;
}

.order-item-row-left {
  padding-top: 4px;
  color: #737373;
}

.order-item-row-right {
  padding-top: 4px;
  color: #737373;
  text-align: right;
}

.order-item-product-item {
  height: 144px;
  margin: 12px 0;
  padding: 12px 0;
  border-top: 1px solid #ECECEC;
  border-bottom: 1px solid #ECECEC;
}

.order-item-product {
  margin: 12px 0;
  display: flex;
  flex-direction: row;
  align-items: center;
}

.order-item-product > img {
  width: 64px;
  height: 64px;
}

.order-item-product-content {
  margin-left: 8px;
  width: 255px;
}

.order-item-product-content-desc {
  width: 255px;
}

.order-item-product-content-category {
  color: #737373;
}

.order-item-act {
  display: flex;
  flex-direction: row-reverse;
}

.order-item-act-button {
  padding: 8px 12px;
  margin: 0 4px;
  box-sizing: border-box;
  border-radius: 8px;
}

.order-item-act-button-cancel-yellow{
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #FCD538;
}

.order-item-act-button-cancel-grey{
  box-sizing: border-box;
  border-radius: 8px;
  border: 1px solid #999999;
}


</style>